﻿@page "/docs/components/alert"

<Seo Canonical="/docs/components/alert" Title="Blazorise Alert component" Description="Learn to work with the Blazorise Alert component, which is used to convey important information to the user through the use of contextual types, icons, and colors." />

<DocsPageTitle Path="Components/Alert">
    Blazorise Alert component
</DocsPageTitle>

<DocsPageLead>
    Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
</DocsPageLead>

<DocsPageParagraph>
    The <Code Tag>Alert</Code> component is used to convey important information to the user through the use of contextual types, icons, and colors.
</DocsPageParagraph>

<DocsPageSubtitle>
    Overview
</DocsPageSubtitle>

<UnorderedList>
    <UnorderedListItem>
        <Paragraph>
            <Code Tag>Alert</Code> the main container.
        </Paragraph>
        <UnorderedList>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>AlertMessage</Code> the main content of the Alert.
                </Paragraph>
            </UnorderedListItem>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>AlertDescription</Code> an optional description of the Alert.
                </Paragraph>
            </UnorderedListItem>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>CloseButton</Code> an optional close button, which will hide the Alert.
                </Paragraph>
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageSubtitle>
    When to use
</DocsPageSubtitle>

<UnorderedList>
    <UnorderedListItem>
        When you need to show alert messages to users.
    </UnorderedListItem>
    <UnorderedListItem>
        When you need a persistent static container which is closable by user actions.
    </UnorderedListItem>
</UnorderedList>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicAlertExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicAlertExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Close button">
        You can also add a <Code>CloseButton</Code>.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <CloseAlertExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="CloseAlertExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Extra content">
        <Code Tag>Alert</Code> can also contain additional HTML elements like headings and paragraphs, which will be styled with the appropriate color matching the variant.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <AlertWithContentExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="AlertWithContentExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Usages
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Two-way binding">
        To show alert just set <Code>Visible</Code> attribute to true.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <AlertUseWithBindExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="AlertUseWithBindExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Programmatically">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <AlertUseProgrammaticallyExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="AlertUseProgrammaticallyExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(Alert)]" />